<template>
    <div class="register">
        <div class="lrAll">
            <h2>注册</h2>
            <div>
                <span>我已有账号，立即</span>
                <router-link to="/login" class="gotoLr">登录</router-link>
            </div>
            <form class="loginForm">
                <input type="text" placeholder="请设置用户名" v-model="username" required>
                <input type="email" placeholder="请输入邮箱" v-model="email" required>
                <input type="password" placeholder="请设置密码" v-model="password" required>
                <div class="getVerCode">
                    <input type="text" placeholder="图片验证码" v-model="pictureCode" required>
                    <img :src="'http://10.30.21.218/captcha?r='+this.r+'&mark=' + this.mark" alt=""
                         @click="changePictureCode">
                </div>
                <div class="getVerCode">
                    <input type="text" placeholder="验证码" v-model="verCode" required maxlength="5" id="emailCodeL">
                    <button @click="getMailCode()" class="getMailCode">
                        {{computedTime>0 ? `已发送(${computedTime}s) `:'获取验证码'}}
                    </button>
                </div>
                <input type="submit" value="注册" @click="registered(),goTo('/login')">
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                username: "",
                email: "",
                password: "",
                verCode: "",
                pictureCode: "",
                mark: this.generateUUID(),
                r: Math.random(),
                computedTime: 0 ,//计时的时间
                getEmail:true
            }
        },
        methods: {
            goTo(path) {
                if (this.username === "" || this.email === "" || this.password === "" || this.verCode === "" || this.pictureCode === "") {
                    this.alertSwal("请输入完整！！！")
                } else {
                    this.alertSwal("注册成功！！！");
                    this.$router.replace(path)
                }
            },
            changePictureCode() {
                this.r = Math.random()
            },
            generateUUID() {
                var d = new Date().getTime();
                if (window.performance && typeof window.performance.now === "function") {
                    d += performance.now(); //use high-precision timer if available
                }
                var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = (d + Math.random() * 16) % 16 | 0;
                    d = Math.floor(d / 16);
                    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
                });
                return uuid;
            },
            getMailCode() {
                // calmlyx@qq.com
                // http://10.30.21.218/sendCaptcha?captcha=atcqa&email=1229950051%40qq.com&mark=1229950051%40qq.com&tel=18381999330
                if (!this.computedTime) {
                    this.computedTime = 30;
                    let intervalId = setInterval(() => {
                        this.computedTime--
                        if (this.computedTime<=0){
                            clearInterval(intervalId);
                        }
                    }, 1000)
                    this.axios.get('http://10.30.21.218/sendCaptcha?captcha=' + this.pictureCode + '&email=' + this.email + '&mark=' + this.mark).then((res) => {
                        console.log(res);
                    }).catch();
                }
            },
            registered() {
                // http://10.30.21.218/register?captcha=bs4v0&email=1229950051%40qq.com&mark=1229950051%40qq.com&password=123456&tel=18381999330&username=qieyu
                this.axios.post('http://10.30.21.218/register?captcha=' + this.verCode + '&email=' + this.email + '&mark=' + this.mark + '&password=' + this.password + '&username=' + this.username).then((res) => {
                    console.log(res);
                }).catch()
            },
        },
    }
</script>

<style>
    .get_email{
        color: red;
    }
    .getVerCode {
        width: 540px;
        height: 88px;
        border: 1px solid #707070;
        border-radius: 24px;
        display: flex;
        background: white;
        margin: 30px 0;
    }

    .getVerCode > input {
        flex: 7;
        border-radius: 24px;
        border: none;
        text-indent: 45px;
    }

    .getVerCode > span {
        flex: 3;
        text-align: center;
        line-height: 88px;
        font-size: 24px;
    }

    .getVerCode > img {
        height: 80px;
    }

    .getMailCode {
        background: none;
        border: none;
        outline: none;
    }
</style>
